<template>
  <div class="page-container">
    <PanelTab @change="handleChange">
      <template slot="end">
        <el-button size="mini" type="primary" style="margin-left: 10px" @click="handleExport">导出</el-button>
      </template>
    </PanelTab>
    <div class="page-content">
      <el-row :gutter="10">
        <el-col :span="24">
          <PanelChart :time="time" chartType="pie" title="招标拍卖·分类概况" :api="apiNoticeCls" param="cate_id" />
        </el-col>
        <el-col :span="24">
          <PanelChart :time="time" chartType="bar" title="招标拍卖·地区概况" :api="apiNoticeArea" param="sheng_id" />
        </el-col>
        <el-col :span="12">
          <PanelChart :time="time" chartType="pie" title="招标拍卖·发布量" :api="apiNoticeSource" param="cate_id">
            <template v-slot:data="{ data }">
              <div class="data-line">
                <div class="item">
                  <span> 同比 </span>
                  <span> {{ data.tb }} </span>
                </div>
                <div class="item">
                  <span> 环比 </span>
                  <span> {{ data.hb }} </span>
                </div>
              </div>
            </template>
          </PanelChart>
        </el-col>
        <el-col :span="12">
          <PanelChart :time="time" chartType="bar" title="招标拍卖·用户发布线索量各端统计" :api="apiNoticePlatform" param="sheng_id">
            <template v-slot:data="{ data }">
              <div class="data-line">
                <div class="item">
                  <span> 同比 </span>
                  <span> {{ data.tb }} </span>
                </div>
                <div class="item">
                  <span> 环比 </span>
                  <span> {{ data.hb }} </span>
                </div>
              </div>
            </template>
          </PanelChart>
        </el-col>
      </el-row>
    </div>

    <!--  导出 -->
    <el-dialog title="导出" :visible.sync="showDialogExport">
      <DialogExport v-if="showDialogExport" type="notice" :time="time" @close="showDialogExport = false" @success="handleExportSuccess" />
    </el-dialog>
  </div>
</template>

<script>
import { apiNoticeCls, apiNoticeArea } from '@/api/index'
import { apiNoticeSource, apiNoticePlatform } from '@/api/dataStatistics/index'
import PanelTab from '@/components/panel/PanelTab.vue'
import PanelChart from '@/components/panel/PanelChart.vue'
import DialogExport from '../components/DialogExport.vue'

export default {
  name: 'NoticeData',
  components: { PanelTab, PanelChart, DialogExport },
  data() {
    return {
      time: {},
      showDialogExport: false,
      apiNoticeCls,
      apiNoticeArea,
      apiNoticeSource,
      apiNoticePlatform,
    }
  },
  mounted() {},
  destroyed() {},
  methods: {
    // 时间变动
    handleChange(time) {
      this.time = time
    },
    // 导出
    handleExport() {
      this.showDialogExport = true
    },
    handleExportSuccess() {
      this.showDialogExport = false
    },
  },
}
</script>

<style scoped lang="scss">
.page-content {
  padding-top: 62px;
}
.data-line {
  width: 100%;
  margin-bottom: 10px;
  font-weight: bold;
  color: #666;
  .item {
    padding: 5px 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
